<template>
  <div>
    <h1>
      电商后台管理系统介绍：
    </h1>
    <p>
      <strong>说明：</strong>该系统数据均是<strong>导入数据库后台数据</strong>渲染而成，包括左侧功能列表，<strong>API接口文档来自网络，由于该接口文档部分功能缺失</strong>，且自己暂时缺乏写后台接口实力，<strong>部分功能受限于该接口功能而无法实现</strong>，，包括登录页面无注册功能，部分功能也没有编辑提交功能。
    </p>

    <div class="div0">
     <ul><h2>所用到的实现技术</h2>
       <ol>vue</ol>
       <ol>vue-cli</ol>
       <ol>vue-router</ol>
       <ol>Element-UI</ol>
       <ol>Axios</ol>
       <ol>Mysql</ol>
     </ul>
    </div>
    <div class="div1">
        <ul><h2>尚未实现的功能：</h2>
          <ol>商品管理-商品列表</ol>
          <ol>订单管理</ol>
          <ol>数据统计</ol>
        </ul>
    </div>
      <div class="div2">
        <ul><h2>已经实现的功能：</h2>
          <ol>  <el-button type="primary" @click="toUser">查询用户列表</el-button></ol>
          <ol>  <el-button type="primary" @click="toUser">修改用户信息</el-button></ol>
          <ol>  <el-button type="primary" @click="toUser">删除用户信息</el-button></ol>
          <ol>  <el-button type="primary" @click="toGoods">查看商品所属参数</el-button></ol>
          <ol>  <el-button type="primary" @click="toGoods">查看商品所有分类</el-button></ol>
          <ol>  <el-button type="primary" @click="toGoods">设置商品所属参数</el-button></ol>
          <ol>  <el-button type="primary" @click="toRoles">查询所有角色信息与权限</el-button></ol>
          <ol>  <el-button type="primary" @click="toRoles">添加所有角色信息与权限</el-button></ol>
          <ol>  <el-button type="primary" @click="toRoles">分配角色权限</el-button></ol>
        </ul>
      </div>
  </div>
</template>

<script>
  export default{
    methods: {
      toUser() {
        this.$router.push('/users')
      },
      toRoles() {
         this.$router.push('/roles')
      },
      toGoods() {
        this.$router.push('/categories')
      }
    }
  }
</script>

<style class="less" scoped>
  p{
    font-size: 16px;
  }
  .div0{
     margin-left:5
     %;
  }
  .div1{
    margin-left:10%;
  }
  .div2{
    margin-left:10%;
  }
  ol{
    margin-top: 8px;
    font-size: 18px;

  }
  .div2 h2{
    font-size: 18px;

  }
  div {
    float: left;
    margin-left: 5px;

  }

  h1 {
    color: #515151;
    font-size: 30px;
    text-align: center;
  }
  h2{
    font-size: 18px;
  }
  ul{
    display: inline-block;
  }




</style>
